<template>
  <div class="product-item">
    <!-- 左边图片 -->
    <div class="select" @click="selectProductRadio()">
      <img v-if="productRadio" src="@/assets/icon／选中@2x.png" />
      <img v-else src="@/assets/icon／未选中@2x.png" />
    </div>
    <div class="product-left">
      <img src="@/assets/矩形 2.png" />
      <!-- <img :src="productItem.src" /> -->
    </div>
    <!-- 右上方文本 -->
    <div class="text">
      <div class="titel eleto fz14">
        {{ productItem.name }}
      </div>
      <!-- 规格 -->
      <span class="specification fz12">瓶装</span>
      <div class="info ">
        <span class="fz18">￥{{ productItem.price }} </span
        ><span class="fz12">数量: 0</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cloudItem',
  props: ['productItem'],
  data() {
    return {
      productRadio: false
    }
  },
  methods: {
    selectProductRadio() {
      //   this.productItem.select = true
      this.productRadio = !this.productRadio
      //   this.$toast('ccc')
      if (this.productRadio) {
        this.productItem.select = true
        // this.$toast(this.productItem)
        console.log(this.productItem)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.product-item {
  margin-bottom: 12px;
  border-radius: 8px;
  padding: 12px 0;
  width: 351px;
  height: 140px;
  display: flex;
  background: #ffffff;
  .select {
    width: 24px;
    height: 100%;
    margin: 34px 4px;
    vertical-align: middle;
    img {
      width: 100%;
      height: 24px;
    }
  }
  .product-left {
    margin-right: 12px;
    width: 116px;
    height: 116px;
    object-fit: cover;
    img {
      width: 100%;
      height: 116px;
    }
  }
  .text {
    // float: left;
    // vertical-align: center;
    position: relative;
    height: 24px;
    width: 179px;
    .titel {
      width: 179px;
      height: 44px;
      font-weight: 600;
      line-height: 22px;
    }
    .specification {
      position: absolute;
      top: 51px;
      left: 0;
      height: 18px;
      line-height: 18px;
      background: #f7f6fb;
      border-radius: 4px;
      text-align: center;
      color: #665e75;
      padding: 0 8px;
    }
    .info {
      position: absolute;
      top: 92px;
      width: 179px;
      height: 24px;
      color: #ff6400;
      font-weight: 600;
      text-align: end;
      span {
        float: left;
        height: 24px;
        font-size: 18px;
      }
      .fz12 {
        position: absolute;
        bottom: 0;
        right: 0;
        float: right;
        font-size: 12px;
        height: 16px;
      }
    }
  }
}
</style>
